<template>
	<a-form-item :label="i18n('chartThemes','图表主题')">
		<div class="pageStyle-caption">
			<ul class="pageStyle-caption-ul">
				<li v-for="(color,index) in colorSubject" :key="index"
					:style="'background-color:'+ color"></li>
			</ul>
			<div class="pageStyle-caption-name" v-if="colorSubject[0]">
				{{ themeClick(colorSubject[0]) }}
			</div>
			<div class="pageStyle-caption-select" @click="themeColors">{{$ti18('rxList.select', '选择')}}</div>
		</div>
	</a-form-item>
</template>

<script>
import ThemeColorsDialog from "@/views/modules/design/dialog/theme-colors-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib";

export default {
	name: "ThemeColors",
	props:['colors'],
	data(){
		return{
			colorSubject:[],
		}
	},
	mounted() {
		this.init()
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"chartLang.themeColors",key);
		},
		init(){
			this.colorSubject = this.colors
		},
		themeColors() {
			let self = this;
			let conf = {
				curVm: this,
				component: ThemeColorsDialog,
				title:this.i18n('chartThemes','图表主题'),
				widthHeight: ['400px', '620px'],
                zIndex:9999,
				data: {
					colorSubject: this.colorSubject,
					themeClick:this.themeClick
				}
			};
			Util.open(conf, function (action, data) {
				if (action != 'ok') return;
				self.colorSubject = data;
				self.$emit('themeColors',data)
			});
		},
		//颜色
		themeClick(color) {
			let name = this.i18n("custom","自定义");
			switch (color) {
				case '#4285f4':
					name = this.i18n("classic","经典")
					break;
				case '#877fa8':
					name = this.i18n("elegance",'典雅')
					break;
				case '#6ec88b':
					name = this.i18n("nature",'自然')
					break;
				case '#408aca':
					name =this.i18n("sky",'天空')
					break;
				case '#12a0e7':
					name =this.i18n("commerce",'商务')
					break;
				case '#76a6d4':
					name = this.i18n("comfortable",'舒适')
					break;
				case '#6f65ff':
					name = this.i18n("bright",'明亮')
					break;
				case '#34b392':
					name = this.i18n("green",'绿色')
					break;
				case '#996430':
					name = this.i18n("brown",'棕色')
					break;
				case '#ff5e5e':
					name = this.i18n("color",'彩色')
					break;
			}
			return name
		},
	}
}
</script>

<style scoped>
.pageStyle-caption {
	height: 40px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	border: solid 1px #dedede;
	align-items: center;
}
.pageStyle-caption-ul {
	display: flex;
	margin-bottom: 0px;
	margin-left: 10px;
	align-items: center;
}

.pageStyle-caption-ul li {
	width: 20px;
	height: 20px;
	background-color: #4285f4;
	border-radius: 2px;
	margin-right: 4px;
}
.pageStyle-caption-select {
	width: 68px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: #f5f7fa;
	border-radius: 0px 4px 4px 0px;
	border: solid 1px #dedede;
	border-right: none;
	cursor: pointer;
}

.pageStyle-caption-name {
	font-size: 14px;
	color: #333333;
	flex: 1;
}

</style>
